<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let option = {
    backgroundColor: "#1a375c",
    legend: {
      textStyle: {
        color: "#ddd",
      },
      padding: [10, 0]
    },
    tooltip: {},
    xAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#ddd",
        fontSize: 14,
        margin: 20,
      },
      type: "category",
      data: ["Christmas Wish list", "", "Qomolangma", "KillmanJaro"],
    },
    yAxis: {
      show: false,
    },
    markLine: {
      z: -1,
    },
    series: [
      {
        name: "All",
        type: "pictorialBar",
        emphasis: {
          scale: true
        },
        label: {
          show: true,
          position: "top",
          color: "#e54035",
          fontSize: 16,
          formatter: '{c}m',
        },
        data: [
          {
            value: 13000,
            symbol: "image://http://localhost:5173/image/paper.png",
            symbolSize: ["130%", "20%"],
            symbolRepeat: true,
            symbolOffset: [0, 10],
            symbolMargin: "-30%",
          },
          {
            value: '',
            symbol: 'none'
          },
          {
            value: 8844,
            symbol: "image://http://localhost:5173/image/mount.png",
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end',
            z: 10
          },
          {
            value: 5895,
            symbol: "image://http://localhost:5173/image/snow.png",
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end',
          }
        ],
        markLine: {
          symbol: ['none', 'none'],
          label: {
            show: false,
          },
          lineStyle: {
            width: 2,
            color: 'red',
          },
          data: [
            {
              yAxis: 8844
            }
          ]
        }
      },
      {
        name: 'All',
        type: 'pictorialBar',
        barGap: '-100%',
        symbol: 'circle',
        itemStyle: {
          color: '#185491'
        },
        silent: true,
        symbolOffset: [0, '50%'],
        z: -10,
        data: [
          {
            value: 1,
            symbolSize: ['150%', 50]
          },
          {
            value: ''
          },
          {
            value: 1,
            symbolSize: ['200%', 50]
          },
          {
            value: 1,
            symbolSize: ['200%', 50]
          }
        ]
      }
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 1000px;
  height: 600px;
}
</style>
